import 'package:flutter/material.dart';
import 'package:flutter_blog_manage_study/res/style.dart';
import 'package:flutter_blog_manage_study/util/formatter/customized_length_formatter.dart';
import 'package:flutter_blog_manage_study/util/formatter/customized_text_formatter.dart';

/// * 作者: Tao
/// * 日期: 2024/3/22
/// * 时间: 16:04
/// * 描述: 输入框widget，左边图标，右边删除按钮
class EditWidget extends StatefulWidget {
  /// 输入框监听
  final ValueChanged<String>? onChanged;

  /// 提示文字
  final String hintText;

  /// 左边图标Widget
  final Widget? leftIconWidget;

  /// 右边图标Widget,例如作为搜索框时的搜索图标
  final Widget? rightIconWidget;

  final VoidCallback? rightIconOnTap;

  /// 是否是密码类型
  final bool passwordType;

  /// 构造方法
  /// * [onChanged] 输入框监听，可为空
  /// * [hintText] 提示文字，默认''
  /// * [leftIconWidget] 左边图标Widget，默认null
  /// * [rightIconWidget] 右边图标Widget，默认null
  /// * [passwordType] 是否是密码类型，默认false
  const EditWidget({
    super.key,
    this.onChanged,
    this.hintText = "",
    this.leftIconWidget,
    this.rightIconWidget,
    this.rightIconOnTap,
    this.passwordType = false,
  });

  @override
  State<EditWidget> createState() => _EditWidgetState();
}

class _EditWidgetState extends State<EditWidget> {
  /// 是否显示密码
  bool showPassWord = false;

  /// 是否显示眼睛
  bool eyeExpand = true;

  @override
  Widget build(BuildContext context) {
    return Row(children: [
      /// 构建编辑框
      Expanded(child: _buildEditWidget()),

      /// 构建右边图标，例如搜索框
      if (widget.rightIconWidget != null) _buildRightIcon(),
    ]);
    // return _buildEditWidget();
  }

  /// 构建编辑框
  _buildEditWidget() {
    return Stack(
      alignment: AlignmentDirectional.centerStart,
      children: [
        Container(
          margin: const EdgeInsets.only(top: 8, bottom: 8, left: 25, right: 25),
          child: TextField(
            keyboardType: TextInputType.number,
            textAlign: TextAlign.left,
            autofocus: false,
            maxLines: 1,
            obscureText: eyeExpand && widget.passwordType,
            style: TextStyles.style_white_16,
            onChanged: (text) {
              if (widget.onChanged != null) {
                widget.onChanged!(text);
              }
              setState(() {
                showPassWord = text.isNotEmpty;
              });
            },
            inputFormatters: [
              /// 输入长度和格式限制
              CustomizedLengthFormatter(16),
              CustomizedTextFormatter(filterPattern: RegExp("[a-zA-Z]|[0-9]"))
            ],
            decoration: InputDecoration(
              /// 样式
              fillColor: Colors.white12,
              filled: true,
              hintText: widget.hintText,
              hintStyle: TextStyles.style_white_16,
              border: _getEditBorder(false),
              focusedBorder: _getEditBorder(true),
              disabledBorder: _getEditBorder(false),
              enabledBorder: _getEditBorder(false),
              contentPadding: const EdgeInsets.only(
                  top: 16, bottom: 16, left: 60, right: 16),
            ),
          ),
        ),
        if (widget.leftIconWidget != null) // 左边图标
          Positioned(
            left: 36,
            width: 36,
            height: 36,
            child: widget.leftIconWidget!,
          ),
        Positioned(
            right: 40,
            child: Visibility(
                visible: showPassWord && widget.passwordType,
                child: IconButton(
                  icon: Icon(
                    eyeExpand ? Icons.remove_red_eye : Icons.visibility_off,
                    size: 24,
                    color: Colors.white,
                  ),
                  onPressed: () {
                    setState(() {
                      eyeExpand = !eyeExpand;
                    });
                  },
                ))),
      ],
    );
  }

  /// 构建右边图标
  _buildRightIcon() {
    return SizedBox(
      width: 36,
      height: 36,
      child: InkWell(
        // 返回,点击事件，水波纹效果
        borderRadius: const BorderRadius.all(
          Radius.circular(20),
        ),
        splashColor: Colors.grey,
        highlightColor: Colors.grey,
        onTap: widget.rightIconOnTap,
        child: widget.rightIconWidget!,
      ),
    );
  }

  /// 获取输入框边框
  /// * [isFocus] 是否是焦点
  _getEditBorder(bool isFocus) {
    return OutlineInputBorder(
      borderRadius: BorderRadius.circular(30),
      borderSide: BorderSide(
        color: isFocus ? Colors.green : Colors.white24,
        width: 1,
      ),
    );
  }
}

// if (widget.rightIconWidget != null)
// Positioned(
// right: 0,
// child: widget.rightIconWidget!,
// ),
